<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>    

    <!-- jQuery Plugin -->
	<script src="../js/jquery-2.2.3.min.js"></script>
       
    <!-- Including alphaTab -->
	<script src="../js/alphaTab/swfobject.js"></script>
	<script src="../js/alphaTab/alphaTab.min.js"></script>

    <!-- Demo Styles and Scripts -->
	<link href="../css/mermaid.css" rel="stylesheet">
	<link href="../css/bootstrap/bootstrap.css" rel="stylesheet" />
	<link href="../css/adminlte/AdminLTE.css" rel="stylesheet" />
	<link href="../css/theme/theme.css" rel="stylesheet" />
	<link href="//fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,400i,700,700i" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../css/override.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css" integrity="sha256-6b+gYy3DG/roKdQiHqp1FJYFQkaZdM6ohUpGyFyUAGk=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js" integrity="sha256-dd5QxcG/E8fb/H/iIQann2y2EDS0nEMVI56yYWFeeW4=" crossorigin="anonymous"></script>    
	<script src="../js/bootstrap.min.js"></script>        

    <link rel="stylesheet" href="support/demo.css" />
    <style type="text/css">
    .barCursor { /* Defines the color of the bar background when a bar is played */
        background: rgba(255, 242, 0, 0.25);
    }

    .selectionWrapper div { /* Defines the color of the selection background */
        background: rgba(64, 64, 255, 0.1)
    }

    .beatCursor { /* Defines the beat cursor */
        background: rgba(64, 64, 255, 0.75)
    }
    
    .atHighlight * { /* Defines the color of the music symbols when they are being played (svg) */
        fill: #0078ff;
        stroke: #0078ff;
    }
    
    
    /* Track selector */
    #trackList li {
        padding: 5px;
    }
    #trackList .btn {
        background: none;
        outline: none;
    }
    #trackList .solo.checked {
        background: #426d9d;
        color: #FFF;
    }
    #trackList .mute.checked {
        background: #c9302c;
        color: #FFF;
    }
    #trackList .title {
        cursor: pointer;
    }
    #trackList .title:hover {
        color: #426d9d;
    }
    #trackList .btn-group {
    }
    
    #trackList .slider-handle {
        -moz-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
    }
    </style>
</head>
<body>
    <!-- Toolbar containing the buttons -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
          <!-- Player controls -->
          <ul class="nav navbar-nav">
            <li><button id="playPause" disabled="disabled" class="btn btn-link navbar-btn fa fa-play"></button></li>
            <li><button id="stop" disabled="disabled" class="btn btn-link navbar-btn fa fa-stop"></button></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Speed: <span id="playbackSpeed">100%</span> <span class="caret"></span></a>
              <ul class="dropdown-menu" id="playbackSpeedSelector">
                <li><a href="#" data-value="0.25">25%</a></li>
                <li><a href="#" data-value="0.5">50%</a></li>
                <li><a href="#" data-value="0.6">60%</a></li>
                <li><a href="#" data-value="0.7">70%</a></li>
                <li><a href="#" data-value="0.8">80%</a></li>
                <li><a href="#" data-value="0.9">90%</a></li>
                <li><a href="#" data-value="1">100%</a></li>
                <li><a href="#" data-value="1.1">110%</a></li>
                <li><a href="#" data-value="1.25">125%</a></li>
                <li><a href="#" data-value="1.5">150%</a></li>
                <li><a href="#" data-value="2">200%</a></li>
              </ul>
            </li>
            <li><a href="#" id="looping" class="fa fa-refresh"></a></li>
            <li><a href="#" id="metronome" class="fa fa-edit" data-toggle="tooltip" data-placement="bottom" title="Metronome"></a></li>
           
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- Loading indicator for soundfont -->
            <li id="soundFontProgressMenuItem">
                <p class="navbar-text">SoundFont</p>
                <div class="progress">
                  <div class="progress-bar" id="soundFontProgress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    0%
                  </div>
                </div>
            </li>
            <!-- Print Button -->
            <li><a href="#" id="print">Print</a></li>
            <!-- Track Selector -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="currentTrack">
                    Tracks
                </a>
                <ul class="dropdown-menu" id="trackList">
                </ul>
            </li>            
            <!-- Buttons for changing the layout -->
            <li class="active"><a href="#" id="page" data-layout="page" data-scrollmode="vertical">Page</a></li>
            <li><a href="#" id="horizontalBarwise" data-layout="horizontal" data-scrollmode="horizontal-bar">Horizontal (Barwise)</a></li>
            <li><a href="#" id="horizontalOffscreen" data-layout="horizontal" data-scrollmode="horizontal-offscreen">Horizontal (Offscreen)</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 
    data-player enables the player 
    data-player-offset specifies the additional offset to apply when scrolling. 
                       in this sample we scroll 70px up for vertical layouts because the menubar would overlap the tablature otherwise. 
                       the 10px are to have a small horizontal padding. 
    -->
    <div id="alphaTab" data-file="../files/NightWish.gp5" data-tracks="3"
                       data-player="../js/alphaTab/default.sf2"
                       data-player-offset="[-10,-70]"></div>
    
    <script type="text/javascript">
        var at = $('#alphaTab');
        
        //
        // 1. setup events        
        at.on('alphaTab.soundFontLoad', function(e, progress) {
            var percentage = ((progress.loaded / progress.total) * 100)|0;
            $('#soundFontProgress').css('width', percentage + '%').text(percentage + '%');
        });
        at.on('alphaTab.soundFontLoaded', function() {
            $('#soundFontProgressMenuItem').hide();
        });
        at.on('alphaTab.playerReady', function() {
            $('#loadingInfo').hide();
            $('#playPause').prop('disabled', false).removeAttr('disabled');            
            $('#stop').prop('disabled', false).removeAttr('disabled');            
            $('#looping').prop('disabled', false).removeAttr('disabled');            
            $('#metronome').prop('disabled', false).removeAttr('disabled');            
            updateControls();
        });
        at.on('alphaTab.playerStateChanged', function() {
            updateControls();
        });
        
        //
        // 2. Load alphaTab 
        at.alphaTab(); 
        
        //
        // 3. Setup UI controls and use API to control the playback 
        
        $('#print').click(function() { 
            at.alphaTab('print');
        });
        
        $('#playPause').click(function() { 
            at.alphaTab('playPause');
        });
        
        $('#stop').click(function() { 
            at.alphaTab('stop');
        });
        
        $('#looping').click(function(e) {
            e.preventDefault();
            var looping = !at.alphaTab('loop');
            at.alphaTab('loop', looping);
            if(looping) {
                $('#looping').closest('li').addClass('active');
            }
            else {
                $('#looping').closest('li').removeClass('active');
            }
        });
        
        $('#metronome').click(function(e) {
            e.preventDefault();
            var metronomeVolume = at.alphaTab('metronomeVolume');
            if(metronomeVolume == 0) {
                at.alphaTab('metronomeVolume', 1);
                $('#metronome').closest('li').addClass('active');
            }
            else {
                at.alphaTab('metronomeVolume', 0);
                $('#metronome').closest('li').removeClass('active');
            }
        });
        
        $('#playbackSpeedSelector a').click(function() {
            var playbackSpeed = $(this).data('value');
            at.alphaTab('playbackSpeed', playbackSpeed);
            $('#playbackSpeed').text($(this).text());
        }); 
        
        function updateControls() {
            var playerState = at.alphaTab('playerState');
            switch(playerState) {
                case 0: // stopped/paused
                $('#playPause').removeClass('fa-pause').addClass('fa-play');
                break;
                case 1: // playing
                $('#playPause').removeClass('fa-play').addClass('fa-pause');
                break;
            }
        }     
        
        $('a[data-layout]').click(function(e) {
            $('a[data-layout]').closest('li').removeClass('active');
            $(this).closest('li').addClass('active');
            
            e.preventDefault();
            
            var layout = $(this).data('layout');
            var scrollmode = $(this).data('scrollmode');
            
            at.removeClass('horizontal page');
            at.addClass(layout);
            
            // update renderer
            at.alphaTab('layout', layout);
            
            // update player
            at.alphaTab('autoScroll', scrollmode);
            $('body,html').animate({
                scrollTop: 0 
            }, 300);
        });
    
        //
        // 4. Track selector
        var tracks = [];
        // keep dropdown open
        $('#trackList').on('click', function(e) {
            e.stopPropagation();
        });
        at.on('alphaTab.loaded', function(e, score) {
            var trackList = $('#trackList');
            trackList.empty();
            
            for( var i = 0; i < score.Tracks.length; i++) {
                // build list item for track
                var li = $('<li></li>')
                    .data('track', score.Tracks[i].Index)
                ;
                
                // show/hide button and track title
                var title = $('<div class="title"></div>');
                li.append(title);
                
                var showHide = $('<i class="fa fa-eye-slash showHide"></i>');
                title.append(showHide);
                title.append(score.Tracks[i].Name);
                title.on('click', function(e) {
                    var track = $(this).closest('li').data('track');
                    tracks = [track];
                    $(this).find('.showHide').removeClass('fa-eye-slash').addClass('fa-eye');
                    
                    // render new tracks
                    at.alphaTab('tracks', tracks);   
                });
                
                // solo and mute buttons
                var soloMute = $('<div class="btn-group btn-group-xs"></div>');
                var solo = $('<button type="button" class="btn btn-default solo">Solo</button>');
                solo.on('click', function(e) {
                    $(this).toggleClass('checked');
                    var isSolo = $(this).hasClass('checked');
                    var track = $(this).closest('li').data('track');
                    at.alphaTab('soloTrack', track, isSolo);                    
                });
                
                var mute = $('<button type="button" class="btn btn-default mute">Mute</button>');
                mute.on('click', function(e) {
                    $(this).toggleClass('checked');
                    var isMute = $(this).hasClass('checked');
                    var track = $(this).closest('li').data('track');
                    at.alphaTab('muteTrack', track, isMute);                    
                });                
                soloMute.append(solo).append(mute);
                li.append(soloMute);
                
                // volume slider
                var volume = $('<input type="text" />')
                    .on('slide', function(e) {
                        var track = $(this).closest('li').data('track');
                        at.alphaTab('trackVolume', track, e.value);
                    });
                li.append(volume);
                volume.slider({
                    min: 0,
                    max: 16,
                    step: 1,
                    value: score.Tracks[i].PlaybackInfo.Volume,
                    handle: 'square'
                })
                
                trackList.append(li);
            }
        });
        at.on('alphaTab.rendered', function(e) {
            // load track indices
            tracks = at.alphaTab('tracks');
            for(var i = 0; i < tracks.length; i++) {
                tracks[i] = tracks[i].Index;
            }
            
            // check checkboxes 
            $('#trackList li').each(function() {
                var track = $(this).data('track');
                var isSelected = tracks.indexOf(track) > -1;
                if(isSelected) {
                    $(this).find('.showHide').removeClass('fa-eye-slash').addClass('fa-eye');
                }
                else {
                    $(this).find('.showHide').removeClass('fa-eye').addClass('fa-eye-slash');
                }
            });       
        });

    
    </script>
    
</body>
</html>     